<template>
  <div id='map-container'>
    <div id='map'></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const map = new AMap.Map('map', {

        zoom: 13,
        center: [116.397428, 39.90923]
      })

      map.on('click', (e) => {
        const districtSearch = new AMap.DistrictSearch({
          subdistrict: 1,
          extensions: 'all'
        })

        districtSearch.search(e.lnglat, function(status, result) {
          if (status === 'complete') {
            const polygons = result.districtList[0].boundaries.map((boundary) => {
              return new AMap.Polygon({
                path: boundary,
                strokeColor: '#3366FF',
                strokeWeight: 5,
                strokeOpacity: 0.8,
                fillColor: '#3366FF',
                fillOpacity: 0.4
              })
            })

            map.add(polygons)
          }
        })
      })

      this.map = map
    }
  }
}
</script>

<style>
#map-container {
  width: 100%;
  height: 100%;
}

#map {
  width: 100%;
  height: 100%;
}
</style>
